<template>
	<div class="tinymce-editor">
		<editor v-model = "myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
	</div>
</template>
<script>
	// import axios from "axios";
	import tinymce from "tinymce/tinymce";
	import Editor from "@tinymce/tinymce-vue";
	import 'tinymce/icons/default/icons'
	import "tinymce/themes/silver";
	import "tinymce/plugins/image"; // 插入上传图片插件
	import "tinymce/plugins/table"; // 插入表格插件
	import "tinymce/plugins/lists"; // 列表插件
	import "tinymce/plugins/wordcount"; // 字数统计插件
	import "tinymce/plugins/code"; // 代码
	import "tinymce/plugins/media"; // 插入编辑媒体文件
	import "tinymce/plugins/anchor"; // 锚点
	import "tinymce/plugins/autolink"; // 自动链接插件
	import "tinymce/plugins/autosave"; // 自动存稿
	import "tinymce/plugins/textpattern"; // 快速排版
	import "tinymce/plugins/searchreplace"; // 查找替换
	import "tinymce/plugins/print"; // 打印
	import "tinymce/plugins/preview"; // 预览
	import "tinymce/plugins/pagebreak"; // 分页
	import "tinymce/plugins/nonbreaking"; // 插入不间断空格
	import "tinymce/plugins/link"; // 超链接
	import "tinymce/plugins/insertdatetime"; // 插入当前日期时间
	import "tinymce/plugins/hr"; // hr 水平分割线
	import "tinymce/plugins/help"; // help 帮助
	import "tinymce/plugins/fullscreen"; //全屏
	import "tinymce/plugins/directionality"; // 文字方向
	import "tinymce/plugins/codesample"; // 代码示例插件
	import "tinymce/plugins/charmap"; //特殊字符插件
	import "tinymce/plugins/visualblocks"; //显示块元素范围
	import "tinymce/plugins/visualchars"; //显示不可见字符
	import "tinymce/plugins/advlist"; //高级列表插件
	import "tinymce/plugins/imagetools"; //图片编辑工具
	import "tinymce/plugins/lineheight/plugin"; //行高
	import "tinymce/plugins/bdmap/plugin"; //地图
	import "tinymce/plugins/indent2em/plugin"; //首行缩进
	import "tinymce/plugins/axupimgs/plugin"; //批量上传图片
	export default {
		components: {
			Editor
		},
  		props: {
			value: {
				type: String,
				default: ""
			},
			// 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
			// 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
			baseUrl: {
				type: String,
				default: "/admin"
			},
			disabled: {
				type: Boolean,
				default: false
			},
			plugins: {
				type: [String, Array],
				default: "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help  autosave bdmap indent2em lineheight axupimgs "
			},
    		// 在toolbar中添加工具栏相应按钮
    		toolbar: {
      			type: [String, Array],
      			default:"code undo redo restoredraft | cut copy paste pastetext searchreplace | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    				styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    				table image media charmap hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight axupimgs "
    		}
  		},
  		data() {
    		return {
      			init: {
					language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`, // 语言包路径
					language: "zh_CN",  //语言
					skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`, //skin路径
					content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`,
					fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
					font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
					// skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
					// content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
					height: 500,  //编辑器高度
					plugins: this.plugins,
					toolbar: this.toolbar,
        			branding: false,  //是否禁用“Powered by TinyMCE”
        			menubar: true, //顶部菜单栏显示
        			// 此处为图片上传处理函数
        			images_upload_handler: (blobInfo, success, failure) => {
        				// let formdata = new FormData()
						// formdata.set('file', blobInfo.blob())
						this.$http.uploader(this.$api.pic,blobInfo.blob()).then(res => {
							// console.log('showurl--------',res)
							success(res.data.data.showurl)
						}).catch(res => {
							failure('error')
						})
        			},
      			},
     	 		myValue: this.value
    		};
  		},
  		mounted() {
    		tinymce.init({});
  		},
  		methods: {
			// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
			// 需要什么事件可以自己增加
			onClick(e) {
      			this.$emit("onClick", e, tinymce);
    		},
    		// 可以添加一些自己的自定义事件，如清空内容
			clear() {
				this.myValue = "";
			}
  		},
  		watch: {
			value(newValue) {
				this.myValue = newValue;
			},
			myValue(newValue) {
				this.$emit("input", newValue);
			}
  		}
	};
</script>